
import React from 'react';
import {
    Linking,
    Image,
    StatusBar,
    StyleSheet,
    TouchableOpacity,
    View,
    Text,
} from 'react-native';
import Camera from 'react-native-camera';
import Viewfinder from './BackgroundViewFinder';

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    preview: {
        marginTop:20,
        width:200,
        height:200,
    },
    overlay: {
        position: 'absolute',
        padding: 16,
        right: 0,
        left: 0,
        alignItems: 'center',
    },
    topOverlay: {
        top: 0,
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    bottomOverlay: {
        bottom: 0,
        backgroundColor: 'rgba(0,0,0,0.4)',
    },
    captureButton: {
        flex: 1,
        padding: 15,
        backgroundColor: 'white',
        borderRadius: 40,
    },
    typeButton: {
        padding: 5,
    },
    flashButton: {
        padding: 5,
    },
    textStyle:{
        fontSize:16,
        textAlign:'center',
    }
});

class ScanQRCode extends React.Component {
    constructor(props) {
        super(props);

        this.camera = null;

        this.state = {
            camera: {
                aspect: Camera.constants.Aspect.fill,
                type: Camera.constants.Type.back,
                barCodeTypes: [Camera.constants.BarCodeType.qr],
                data:'',
            },
        };

        this._onBarCodeRead = this._onBarCodeRead.bind(this);
    }

    _onBarCodeRead(options){
        const url = options.data;
        Linking.canOpenURL(url).then(supported => {
            if (!supported) {
                console.log('Can\'t handle url: ' + url);
            } else {
                return Linking.openURL(url);
            }
        }).catch(err => console.error('An error occurred', err));
        this.refs.camera.getFOV()
            .then((e)=>{



            })
            .catch(err => console.error('An error occurred', err));


    }

    render() {
        return (
            <View style={styles.container}>
                <Viewfinder>
                    <Camera
                        ref='camera'
                        style={styles.preview}
                        barCodeTypes={this.state.camera.barCodeTypes}
                        onBarCodeRead={this._onBarCodeRead}
                    />
                </Viewfinder>
                <Text >{this.state.data}</Text>
            </View>
        );
    }
}

export default ScanQRCode;